<template>
	<view class="ass-guess" v-if="props.list.length">
		<view class="ass-guess-title">猜您喜欢</view>
		<view class="ass-guess-content">
			<view class="ss-flex ss-flex-wrap ss-row-between" style="padding:0 24rpx 25rpx;">
				<assFindCard :findData="find" v-for="find in props.list" :key="find.id" @like="setLike(find)"
					@cardTap="jump(find)">
				</assFindCard>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import API from '@/association/api';
	import assFindCard from '@/components/ass-find-card.vue'
	import {
		reactive
	} from 'vue';
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		}
	});
	const state = reactive({})


	const jump = (find) => {
		// TODO 如果一直使用go跳转 会超出页面栈
		sheep.$router.redirect('/association/pages/find', {
			id: find.find_id,
			type: find.label
		})
	}

	// 切换发现喜欢状态
	async function setLike(item) {
		let res = await API.findLike({
			find_id: item.find_id,
		});
		item.is_likes = !!res.data.is_like;
		if (item.is_likes) {
			item.likes += 1;
		} else {
			item.likes -= 1;
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.ass-guess {
		.ass-guess-title {
			padding: 0 25rpx;
			font-size: 32rpx;
			font-weight: 600rpx;
		}


	}
</style>